<template>
	<div class="wrapper">
				
				<!-- header部分 -->
				<header>
					<button class="back-arrow" @click="goBack"></button>
					<p>商家信息</p>
				</header>
				
				<!-- 商家logo部分 -->
				<div class="business-logo">
					<img :src="business.businessImg">
				</div>
				
				<!-- 商家信息部分 -->
				<div class="business-info">
					<h1>{{business.businessName}}</h1>
					<p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
					<p>{{business.businessExplain}}</p>
					<button class="more-info-btn" @click="viewMoreDetails(businessId)">查看评价</button>
				</div>
				
				<!-- 食品列表部分 -->
				<ul class="food">
					<li v-for="(item,index) in foodArr">
						<div class="food-left">
							<img :src="item.foodImg">
							<div class="food-left-info">
								<h3>{{item.foodName}}</h3>
								<p>{{item.foodExplain}}</p>
								<p>&#165;{{item.foodPrice}}</p>
							</div>
						</div>
						<div class="food-right">
							<div>
								<i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity!=0"></i>
							</div>
							<p><span v-show="item.quantity!=0">{{item.quantity}}</span></p>
							<div>
								<i class="fa fa-plus-circle" @click="add(index)"></i>
							</div>
						</div>
					</li>
				</ul>
				
				<!-- 购物车部分 -->
				<div class="cart">
					<div class="cart-left">
						<div class="cart-left-icon" :style="totalQuantity==0?'background-color:#505051;':'background-color:#3190E8;'" @click="openCartModal">
							<i class="fa fa-shopping-cart"></i>
							<div class="cart-left-icon-quantity" v-show="totalQuantity!=0">{{totalQuantity}}</div>
						</div>
						<div class="cart-left-info">
							<p>&#165;{{totalPrice}}</p>
							<p>另需配送费{{business.deliveryPrice}}元</p>
						</div>
					</div>
					<div class="cart-right">
						<!-- 不够起送费 -->
						<div class="cart-right-item" v-show="totalSettle<business.starPrice" style="background-color: #535356;cursor: default;">
							&#165;{{business.starPrice}}起送
						</div>
						<!-- 达到起送费 -->
						<div class="cart-right-item" @click="toOrder" v-show="totalSettle>=business.starPrice">
						    去结算
						</div>
						 <!-- Alert Modal -->
						 <alert-modal v-if="alertVisible" :visible.sync="alertVisible" :message="alertMessage"></alert-modal>
					</div>
				</div>
				<!-- 购物车蒙板 -->
				<div class="cart-modal" v-if="showCartModal" @click.self="closeCartModal">
				  <div class="cart-modal-content" @click.stop>
				    <!-- 蒙板内容 -->
				    <ul class="cart-items">
				      <li v-for="(item, index) in cartItems" :key="item.id">
				        <div class="cart-item">
				          <img :src="item.foodImg" class="cart-item-image">
				          <div class="cart-item-info">
				            <h3>{{ item.foodName }}</h3>
				            <p>数量: {{ item.quantity }}</p>
				            <p>单价: &#165;{{ item.foodPrice }}</p>
				            <p>小计: &#165;{{ (item.foodPrice*item.quantity).toFixed(2) }}</p>
				          </div>
				        </div>
				      </li>
				    </ul>
				    <button class="close-modal-btn" @click="closeCartModal">关闭</button>
				  </div>
				</div>
			</div>
			
</template>

<script>
	import AlertModal from '../views/AlertModal.vue';
	import Big from 'big.js';
	import request from '../request.js';
	export default{
		name:'BusinessInfo',
		components: {
         AlertModal
        },
		data(){
			return {
				alertVisible: false,
		        alertMessage: '',
				businessId: this.$route.query.businessId,
				business:{},
				foodArr:[],
				user:{},
				showCartModal: false,
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			
			//根据businessId查询商家信息
			request.get(`businesses/${this.businessId}`).then(response=>{
				this.business = response.data;
			}).catch(error=>{
				console.error(error);
			});
			
			//根据businessId查询所属食品信息
			request.get(`foods/businesses/${this.businessId}`).then(response=>{
				this.foodArr = response.data;
				for(let i=0;i<this.foodArr.length;i++){
					this.foodArr[i].quantity=0;
				}
				
				//如果已登录，那么需要去查询购物车中是否已经选购了某个食品
				if(this.user!=null){
					this.listCart();
				}
			}).catch(error=>{
				console.error(error);
			});
		},
		computed: {
		    // 计算已添加到购物车中的物品
		    cartItems() {
		      return this.foodArr.filter(item => item.quantity > 0);
			  }
		    },
		methods:{
			openCartModal() {
  				this.showCartModal = true;
  				this.$nextTick(() => {
    				const modalContent = document.querySelector('.cart-modal-content');
    				modalContent.classList.add('active');
  				});
			},
			closeCartModal() {
  				const modalContent = document.querySelector('.cart-modal-content');
  				modalContent.classList.remove('active');
  				setTimeout(() => {
    				this.showCartModal = false;
  				}, 300); // 等待动画结束后关闭
			},
			goBack() {
				console.log('Trying to go back...');
                this.$router.go(-1); // 相当于浏览器的后退操作
                },
		    viewMoreDetails(businessId) {//跳转到详情   
                  this.$router.push({ path: '/BusinessDetails', query:{businessId:businessId} });
                                 },
			listCart(){
				request.get('carts/', {
        			params: {
            			userId: this.user.userId,
            			businessId: this.businessId
        			}
    			}).then(response=>{
					let cartArr = response.data;
					//遍历所有食品列表
					for(let foodItem of this.foodArr){
						foodItem.quantity = 0;
						for(let cartItem of cartArr){
							if(cartItem.foodId==foodItem.foodId){
								foodItem.quantity = cartItem.quantity;
							}
						}
					}
					this.foodArr.sort();
				}).catch(error=>{
					console.error(error);
				});
			},
			add(index){
				//首先做登录验证
				if(this.user==null){
					this.$router.push({path:'/login'});
					return;
				}
				
				if(this.foodArr[index].quantity==0){
					//做insert
					this.savaCart(index);
				}else{
					//做update
					this.updateCart(index,1);
				}
			},
			minus(index){
				//首先做登录验证
				if(this.user==null){
					this.$router.push({path:'/login'});
					return;
				}
				
				if(this.foodArr[index].quantity>1){
					//做update
					this.updateCart(index,-1);
				}else{
					//做delete
					this.removeCart(index);
				}
			},
			savaCart(index){
				request.post('carts/',this.$qs.stringify({
					businessId:this.businessId,
					userId:this.user.userId,
					foodId:this.foodArr[index].foodId
				})).then(response=>{
					if(response.data==1){
						//此食品数量要更新为1；
						this.foodArr[index].quantity=1;
						this.foodArr.sort();
					}else{
						alert('向购物车中添加食品失败！');
					}
				}).catch(error=>{
					console.error(error);
				});
			},
			updateCart(index,num){
				request.put('carts/',null,{
					params: {
						userId: this.user.userId,
						businessId: this.businessId,
						foodId: this.foodArr[index].foodId,
						quantity: this.foodArr[index].quantity+num
					}
				}).then(response=>{
					if(response.data==1){
						//此食品数量要更新为1或-1；
						this.foodArr[index].quantity+=num;
						this.foodArr.sort();
					}else{
						alert('向购物车中更新食品失败！');
					}
				}).catch(error=>{
					console.error(error);
				});
			},
			removeCart(index){
				request.delete('carts/',{
					params: {
						userId: this.user.userId,
						businessId: this.businessId,
						foodId: this.foodArr[index].foodId
					}
				}).then(response=>{
					if(response.data==1){
						//此食品数量要更新为0；视图的减号和数量要消失
						this.foodArr[index].quantity=0;
						this.foodArr.sort();
					}else{
						alert('从购物车中删除食品失败！');
					}
				}).catch(error=>{
					console.error(error);
				});
			},
			toOrder(){
				this.$router.push({path:'/orders',query:{businessId:this.business.businessId}});
			}
		},
		computed:{
			//食品总价格
			totalPrice(){
				let total = 0;
				for(let item of this.foodArr){
					total += item.foodPrice*item.quantity;
				}
				return total;
			},
			//食品总数量
			totalQuantity(){
				let quantity = 0;
				for(let item of this.foodArr){
					quantity += item.quantity;
				}
				return quantity;
			},
			cartItems() {
			    return this.foodArr.filter(item => item.quantity > 0);
			  },
			//结算总价格
			totalSettle(){
				return this.totalPrice+this.business.deliveryPrice;
			},
			calculateItemTotal(item) {
         		return Big(item.food.foodPrice).times(item.quantity).toString();
           	}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper{
		width: 100%;
		height: 100%;
	}
	/****************** 返回键 ******************/

	.back-arrow {
  position: fixed; /* 固定定位 */
  left: 2.5vw; /* 距离屏幕左端像素 */
  top: 2.5vw; /* 距离屏幕顶部像素 */
  width: 8vw; /* 使用视口宽度的百分比 */
  height: 8vw; /* 使用视口宽度的百分比，保持宽高比 */
  background-color: rgba(0, 151, 255, 0.5); /* 半透明的背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none; /* 隐藏边框 */
  transition: background-color 0.3s ease; /* 背景颜色变化动画 */
}

.back-arrow::before {
  content: '\f053'; /* 使用 FontAwesome 的左箭头图标 */
  font-family: 'FontAwesome'; /* FontAwesome 字体 */
  font-size: 5vh; /* 使用视口高度的百分比，确保在不同设备上也合适 */
  color: #fff; /* 字体颜色 */
  transition: color 0.3s ease; /* 字体颜色变化动画 */
}

.back-arrow:hover::before {
  color: #0a2ddc; /* 鼠标悬停时的颜色变化 */
}

.back-arrow:hover {
  background-color: rgba(0, 151, 255, 0.3); /* 鼠标悬停时的背景颜色变化为更透明 */
}
	/****************** header部分 ******************/
	.wrapper header{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/****************** 商家logo部分 ******************/
	.wrapper .business-logo{
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper .business-logo img{
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
	}
	
	/****************** 商家信息部分 ******************/
	.wrapper .business-info{
		width: 100%;
		height: 20vw;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wrapper .business-info h1{
		font-size: 5vw;
	}
	.wrapper .business-info p{
		font-size: 3vw;
		color: #666;
		margin-top: 1vw;
	}
	/* 添加查看更多详情按钮的样式 */
.wrapper .business-info .more-info-btn {
  background-color: #3190E8;
  color: #fff;
  border: none;
  padding: 1vw 3vw;
  border-radius: 5px;
  font-size: 3vw;
  cursor: pointer;
  margin-top: 2vw;
}
	/****************** 食品列表部分 ******************/
	.wrapper .food{
		width: 100%;
		/*使用下外边距避开footer部分*/
		padding-bottom: 14vw;
	}
	.wrapper .food li{
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .food li .food-left{
		display: flex;
		align-items: center;
	}
	.wrapper .food li .food-left img{
		width: 20vw;
		height: 20vw;
	}
	.wrapper .food li .food-left .food-left-info{
		margin-left: 3vw;
	}
	.wrapper .food li .food-left .food-left-info h3{
		font-size: 3.8vw;
		color: #555;
	}
	.wrapper .food li .food-left .food-left-info p{
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
	.wrapper .food li .food-right{
		width: 16vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .food li .food-right .fa-minus-circle{
		font-size: 5.5vw;
		color: #999;
		cursor: pointer;
	}
	.wrapper .food li .food-right p{
		font-size: 3.6vw;
		color: #333;
	}
	.wrapper .food li .food-right .fa-plus-circle{
		font-size: 5.5vw;
		color: #0097EF;
		cursor: pointer;
	}
	/****************** 购物车蒙版部分 ******************/
.cart-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 背景蒙版变暗 */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 1001; /* 提升蒙版层级 */
  transition: opacity 0.3s ease;
}

.cart-modal-content {
  background-color: #fff;
  width: 100%;
  flex-basis: 100%; /* 确保内容占据整个屏幕宽度 */
  max-width: 100%;  /* 设置最大宽度，确保不留空白 */
  height: 50%;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 添加阴影 */
  border-radius: 12px 12px 0 0; /* 顶部圆角 */
  position: relative;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  transition: transform 0.3s ease;
}

.cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0; /* 底部加分割线 */
}

.cart-item-image {
  width: 60px;
  height: 60px;
  border-radius: 10px; /* 图片圆角 */
  margin-right: 10px;
  object-fit: cover; /* 图片自适应 */
}

.cart-item-info {
  flex-grow: 1; /* 信息区占满剩余空间 */
}

.cart-item-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.cart-item-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.cart-item-info .total-price {
  font-weight: bold;
  color: #3190E8;
}

.close-modal-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

.close-modal-btn:hover {
  background-color: #d32f2f; /* 更暗的红色，悬停效果 */
}

/* 添加滑动动画 */
.cart-modal-content {
  transform: translateY(100%); /* 默认隐藏在底部 */
}

.cart-modal-content.active {
  transform: translateY(0); /* 激活时向上滑动进入视图 */
}

	/****************** 购物车部分 ******************/
	.wrapper .cart{
		width: 100%;
		height: 14vw;
		
		position: fixed;
		left: 0;
		bottom: 0;
		
		display: flex;
	}
	.wrapper .cart .cart-left{
		flex: 2;
		background-color: #505051;
		display: flex;
	}
	.wrapper .cart .cart-left .cart-left-icon{
		width: 16vw;
		height: 16vw;
		box-sizing: border-box;
		border: solid 1.6vw #444;
		border-radius: 8vw;
		background-color: #3190E8;
		font-size: 7vw;
		color: #fff;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		margin-top: -4vw;
		margin-left: 3vw;
		
		position: relative;
	}
	.wrapper .cart .cart-left .cart-left-icon-quantity{
		width: 5vw;
		height: 5vw;
		border-radius: 2.5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}
	.wrapper .cart .cart-left .cart-left-info p:first-child{
		font-size: 4.5vw;
		color: #fff;
		margin-top: 1vw;
	}
	.wrapper .cart .cart-left .cart-left-info p:last-child{
		font-size: 2.8vw;
		color: #AAA;
	}
	
	.wrapper .cart .cart-right{
		flex: 1;
	}
	/*达到起送费时的样式*/
	.wrapper .cart .cart-right .cart-right-item{
		width: 100%;
		height: 100%;
		background-color: #38CA73;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		cursor: pointer;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
	/*
	.wrapper .cart .cart-right .cart-right-item{
		width: 100%;
		height: 100%;
		background-color: #535356;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	*/
</style>